<template>
    <a-form class="group">
        <div class="headers">{{ setting.name }}:</div>
        <div class="content">
            <rx-input-button v-model="values" type="tag" v-bind="dataConfig"
                             @btnClick="openDialog(setting.type)"></rx-input-button>
            <div class="grouptips" v-if="!tips">{{ i18n("tips", "如果勾选了不包含，是除开选中的都有权限，不勾选则选中的有权限") }}</div>
        </div>
        <div class="buttonlt" style="padding-top: 6px">
            <a-checkbox class="tabButton" v-model:checked="exclude" @change="onChangeInclude">
                {{ i18n("notInclude", "不包含") }}
            </a-checkbox>
        </div>
    </a-form>

</template>
<script>
import {RxInputButton} from '@lowcode/jpaas-base-lib';
import {ShareDialog} from "@lowcode/jpaas-share-component"

export default {
    name: 'FormUserOrGroup',
    components: {
        RxInputButton
    },
    props: {
        value: {
            type: Object,
            default: () => {
            }
        },
        tips: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            dataConfig: {singleValue: false, multiple: true},
            exclude: false,
            typeList: [],
            values: "",
            valueList: {
                values: [],
                names: []
            },
            setting:this.value
        }
    },
    mounted() {
        if (this.setting.values) {
            this.getValues();
        }
    },
    methods: {
        i18n(name, text, key) {
            return this.$ti18(name, text, "formUserOrGroupLang", key);
        },
        onChangeInclude() {
            this.setting.include = !this.exclude;
        },
        openDialog(btn) {
            let method = " this.func_" + btn + "()";
            eval(method);
        },
        func_subGroup() {
            this.selectGroups();
        },
        func_group() {
            this.selectGroups();
        },
        selectGroups() {
            let self = this;
            let conf = {
                curVm: this,
                data: {single: false, showDimId: true, initGroups: this.getInitGroups()},
                widthHeight: ['900px', '700px']
            };
            ShareDialog.openGroupDialog(conf, function (data) {
                for (let i = 0; i < data.length; i++) {
                    let obj = data[i];
                    if (self.valueList.values.indexOf(obj.groupId) == -1) {
                        self.valueList.values.push(obj.groupId);
                        self.valueList.names.push(obj.name);
                    }
                }
                self.sendChangeValue();
            })
        },
        func_user() {
            let self = this;
            let conf = {curVm: this, data: {single: false,initUsers:this.getInitUsers()}, widthHeight: ['1000px', '700px']};
            ShareDialog.openUserDialog(conf, function (users) {
                for (let i = 0; i < users.length; i++) {
                    let obj = users[i];
                    if (self.valueList.values.indexOf(obj.userId) == -1) {
                        self.valueList.values.push(obj.userId);
                        self.valueList.names.push(obj.fullName);
                    }
                }
                self.sendChangeValue();
            });
        },
        getValues() {
            this.exclude = !this.setting.include;
            let values = this.setting.values.split(",");
            let names = this.setting.names.split(",");
            for (let i = 0; i < values.length; i++) {
                this.valueList.values.push(values[i]);
                this.valueList.names.push(names[i]);
            }
            this.sendChangeValue();
        },
        sendChangeValue() {
            let changeValues = {
                value: this.valueList.values.join(","),
                label: this.valueList.names.join(",")
            };
            this.values = JSON.stringify(changeValues);
        },
        /**
         * 获取回填用户组数据
         * @returns {*[]}
         */
        getInitGroups(){
            let initGroups=[];
            let data=[];
            if(this.values){
                let valueList=JSON.parse(this.values);
                let values=valueList.value.split(",");
                let labels=valueList.label.split(",");
                for (let i = 0; i < values.length; i++) {
                    data.push({
                        groupId:values[i],
                        name:labels[i],
                    })
                }
                if(data.length > 0){
                    let obj = {
                        key:"0",
                        name:"上次已选择的用户组",
                        data:data
                    }
                    initGroups=[obj] ;
                }
            }
            return initGroups;
        },
        /**
         * 获取回填用户数据
         * @returns {*[]}
         */
        getInitUsers(){
            let initUsers=[];
            if(this.values){
                let valueList=JSON.parse(this.values);
                let values=valueList.value.split(",");
                let labels=valueList.label.split(",");
                for (let i = 0; i < values.length; i++) {
                    initUsers.push({
                        userId:values[i],
                        fullName:labels[i],
                    })
                }
            }
            return initUsers;
        },
    },
    watch: {
        values: function (val) {
            if(val){
                let obj = JSON.parse(val);
                this.setting.values = obj.value;
                this.setting.names = obj.label;
                if (obj.value) {
                    let changeValues = {
                        values: obj.value.split(","),
                        names: obj.label.split(",")
                    };
                    this.valueList = changeValues;
                } else {
                    this.valueList = {
                        values: [],
                        names: [],
                    }
                }
            }else {
                this.setting.values="";
                this.setting.names="";
            }
        }
    }
}
</script>

<style scoped>
.tabButton {
    vertical-align: middle;
}

.headers {
    font-weight: bold;
    width: 100px;
    overflow: hidden;
    text-align: right;
    margin-right: 10px;
    line-height: 33px;
}

.ant-form-inline .ant-form-item {
    display: block;
}

.group {
    display: flex;
}

.buttonlt {
    width: 100px;
    padding-left: 20px;
}

.content {
    flex: 1;
}

.grouptips {
    font-size: 12px;
    color: #8a9199;
}
</style>
